<template>

  <div class="home">
    <h1>这是首页</h1>
    <div>
      <router-link to="/index1">index1</router-link>
    </div>
    <div>
      <router-link to="/index2">index2</router-link>
    </div>
    <div>
      <router-link to="/index3">index3</router-link>
    </div>
    <div>
      <router-link to="/about">about</router-link>
    </div>
  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import {Tabbar, TabbarItem} from 'vant';
import {ref} from "vue";

export default {
  name: "Home",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  setup() {
    const active = ref(0);
    return {active};
  },
};
</script>
<style scoped>
.home {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  height: 100vh;
  background-color: red;
}
</style>
